<template>
  <div id="hotNew">
    <mt-header fixed title="热点在哪里" class="hot-header" v-if="isHeader">
      <mt-button icon="back" slot="left" @click="goBack"></mt-button>
      <mt-button slot="right" id="essence">{{this.newContents.length}}</mt-button>
    </mt-header>
    <div class="hot-date" :class="isHeader?'isHeader':''">
      <div class="date-wrapper">
        <div class="date-list" v-for="(item,index) in this.beforeDateArr" @click="essence(item,index)"
             :class="{ sel_essence: sel_index == index }">
          <p>{{item.date.slice(5,7)}}月</p>
          <p class="news_days">{{item.date.slice(8,10)}}</p>
          <p>{{item.week}}</p>
        </div>
      </div>
    </div>
    <div class="hot-cont" :class="isHeader?'isHeader':'test'">
      <div class="hot-list clearfix">
        <div class="page-loadmore-wrapper">
          <div class="clearfix contents" v-for="(item,itemIndex) in newContents">
            <div class="date-time">
              <div class="date-times">{{item.news_time.slice(5,7) + '/' + item.news_time.slice(8,10)}}</div>
            </div>
            <div class="article">
              <div class="title">{{item.title}}</div>
              <div class="update-time">更新于{{item.news_time.slice(0,10) + ' ' + item.news_time.slice(11,19)}}</div>
              <div class="page" @click="content(item)">
                <span v-html="item.content.slice(0,80)"></span>
                <span v-show="!item.hideContent && item.content.length > 80">...</span>
                <span v-show="item.hideContent" v-html="item.content.slice(80,item.content.length)"></span>
              </div>
            </div>
            <div class="stock" v-if="item.stocks.length > 0">
              <div class="stock-introduce">
                涉及个股
              </div>
              <ul class="stock-info">
                <li v-for="stock in item.relate_stocks" :class="[stock.zd > 0? 'red' : 'green']"
                    v-if='stock.su_sign.charAt(0).toLocaleLowerCase() != 1 && stock.su_sign.charAt(0).toLocaleLowerCase() != "p" && stock.su_sign.charAt(0).toLocaleLowerCase() != "h"'
                    @click="goToStockQuote(stock)">
                  <font>
                    {{stock.stock_name}}
                    <label>{{stock.stock_code.slice(0,6)}}</label>
                  </font>
                  <span>
                    <!-- 涉及个股 -->
                    {{Number(stock.last_price).toFixed(2)}}
                    <label v-if="stock.zd > 0">+{{stock.fd}}</label>
                    <label v-else>{{stock.fd}}</label>
                  </span>
                </li>
                <li v-for="stock in item.relate_stocks" class='gray'
                    v-if='stock.su_sign.charAt(0).toLocaleLowerCase() == 1 || stock.su_sign.charAt(0).toLocaleLowerCase() == "p" || stock.su_sign.charAt(0).toLocaleLowerCase() == "h"'
                    @click="goToStockQuote(stock)">
                  <font>
                    {{stock.stock_name}}
                    <label>{{stock.stock_code.slice(0,6)}}</label>
                  </font>
                  <span>
                    已停牌
                  </span>
                </li>
              </ul>
            </div>
            <div class="xgyz" v-if='item.factors.length> 0'> 相关因子
            </div>
            <div class="keyword" v-if='item.factors.length > 0'>
              <ul>
                <li class="cols" v-for='(fund,fundIndex) in item.factors' @click="stockInfo(fund,fundIndex,itemIndex)"
                    :class="{'focus':item.selected == fundIndex}">
                  {{fund.factor_name}}
                </li>
              </ul>
            </div>
            <div class="stock" v-if='item.funds.length > 0'>
              <div class="stock-introduce">相关个股</div>
              <ul class="stock-info">
                <li v-for="fund in item.funds" :class="[fund.zd > 0 ? 'red' : 'green']"
                    v-if='fund.su_sign.charAt(0).toLocaleLowerCase() != 1 && fund.su_sign.charAt(0).toLocaleLowerCase() != "p" && fund.su_sign.charAt(0).toLocaleLowerCase() != "h"'
                    @click="goToStockQuote(fund)">
                  <font>
                    {{fund.stock_name}}
                    <label>{{fund.stock_code.slice(0,6)}}</label>
                  </font>
                  <span>
                    {{Number(fund.LastPx).toFixed(2)}}
                    <label v-if="fund.zd > 0">+{{fund.fd}}</label>
                    <label v-else>{{fund.fd}}</label>
                  </span>
                </li>
                <li v-for="fund in item.funds" class='gray'
                    v-if='fund.su_sign.charAt(0).toLocaleLowerCase() == 1 || fund.su_sign.charAt(0).toLocaleLowerCase() == "p" || fund.su_sign.charAt(0).toLocaleLowerCase() == "h"'
                    @click="goToStockQuote(fund)">
                  <font>
                    {{fund.stock_name}}
                    <label>{{fund.stock_code.slice(0,6)}}</label>
                  </font>
                  <span>
                    已停牌
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//  import {Indicator} from 'mint-ui'
  import REQUEST from './../services/test'
  import {
    formatDate,
    getBeforeTenDate
  } from './../utility/date'

  export default {
    name: 'hotNew',
    data () {
      return {
        isHeader: false,
        newContents: [],
        selected: 0,
        list_count: '',
        hideContent: false,
        beforeDateArr: [],
        sel_index: 0,
        essence_url: ''
      }
    },
    created () {
      this.$store.commit('getUrlParams')
      this.isHeader = this.$store.state.isHeader
    },
    methods: {
      goBack: function () {
        history.back()
      },
      news () {
        this.newContents = []
        let currentDate = this.beforeDateArr[this.sel_index].date
        let _url = '/' + currentDate + '/1'
        REQUEST.getHotNews(_url).then(res => {
//          Indicator.close()
          this.list_count = res.length
          res.forEach((element, index) => {
            element.hideContent = false
            var titleEnd = element.content.search(/】/gi)
            var titleComma = element.content.search(/。/gi)
            if (titleEnd !== -1) {
              element.title = element.content.slice(1, titleEnd)
            } else {
              element.title = element.content.slice(0, titleComma)
            }
            // 涉及个股
            var relateStock = []
            console.log('uuuuuuuuuuu', element.stocks);
            var stocks_arr = element.stocks.map(stock => stock.stock_code)
            if (element.stocks.length > 0) {
              REQUEST.getNewStockQuote(stocks_arr.join(','), stocks_arr.length).then(res => {
                element.relate_stocks = res
              }).catch(err => {
                console.log(err)
              })
            } else {
              element.relate_stocks = []
            }
            // 默认第一个选中
            element.selected = 0
            // 相关因子个股
            element.funds = []
            this.newContents = Array.from(res)
            if (element.factors.length > 0) {
              REQUEST.getBestStocks(element.factors[0].factor_name).then(res => {
                // getNewStockQuote
                REQUEST.getNewStockQuote(res[0].stock_codes.join(','), res[0].stock_codes.length).then(fund => {
                  element.funds = fund
                  element.funds.forEach(best_funds => {
                    best_funds.increase = best_funds.fd
                    best_funds.rise = best_funds.zd
                    best_funds.LastPx = best_funds.last_price
                  })
                  this.newContents = Array.from(this.newContents)
                }).catch(err => {
                  console.log(err)
                })
              }).catch(err => {
                console.log(err)
              })
            }
          })
        })

      },
      stockInfo (fund, fundIndex, itemIndex) {
        this.newContents[itemIndex].selected = fundIndex
        this.newContents = Array.from(this.newContents)
        this.relevant_stock(fund, itemIndex)
      },
      // 相关股票
      relevant_stock (fund, index) {
        REQUEST.getBestStocks(fund.factor_name).then(res => {
          REQUEST.getNewStockQuote(res[0].stock_codes.join(','), res[0].stock_codes.length).then(fund => {
            this.newContents[index].funds = fund
            this.newContents[index].funds.forEach(best_funds => {
              best_funds.increase = best_funds.fd
              best_funds.rise = best_funds.zd
              best_funds.LastPx = best_funds.last_price
            })
            this.newContents = Array.from(this.newContents)
          }).catch(err => {
            console.log(err)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      // 详情内容
      content (item) {
        item.hideContent = !item.hideContent
        this.newContents = Array.from(this.newContents)
      },
      // 相关个股排序
      stock_sort (a, b) {
        return (
          (b.LastPx - b.PrevClsPx) / b.PrevClsPx -
          (a.LastPx - a.PrevClsPx) / a.PrevClsPx
        )
      },
      essence (item, index) {
        this.sel_index = index
//        Indicator.open({
//          text: '加载中...',
//          spinnerType: 'fading-circle'
//        })
        this.news()
      },
      // 获取股票行情
      goToStockQuote (_item) {
        let _code = ''
        if (_item.stock_code.charAt(0) == '6') {
          _code = _item.stock_code + '.SS'
        } else {
          _code = _item.stock_code + '.SZ'
        }
        // console.log(_code)
        egos.callquotation(_code)
      }
    },
    mounted () {
      this.beforeDateArr = getBeforeTenDate()
      this.news()
      // REQUEST.getBestStocks('券商').then(res => {
      //   console.log(res)
      // })
      // REQUEST.getStockQuote('000024.SZ').then(res => {
      //   console.log(res)
      // }).catch(err => {
      //   console.log(err);
      // })
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  #hotNew {
    .mint-header.is-fixed {
      background-color: #0f1316;
    }
    .hot-date.isHeader {
      top: 1.25rem !important;
    }
    .hot-cont.isHeader {
      .hot-list {
        padding-top: 3.1166667rem !important;
      }
    }
    .hot-cont.test {
      .hot-list {
        padding-top: 1.8666667rem !important;
      }
    }
    .hot-date {
      position: fixed;
      /*top: 1.25rem;*/
      background: #e5e5e5;
      width: 100%;
      font-size: 0.4rem;
      height: 1.6666667rem;
      z-index: 10;
      /*overflow: hidden;*/
      .date-wrapper::-webkit-scrollbar{
        -webkit-overflow-scrolling: touch;
      }
      .date-wrapper {
        height: inherit;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
        .date-list {
          height: 100%;
          width: 15%;
          display: inline-block;
          *display: inline;
          *zoom: 1;
          text-align: center;
          padding: 0 0.2666667rem;
          p {
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            /*width: 20%;*/
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            white-space: nowrap;
          }
          .news_days {
            font-size: 0.4rem;
          }
        }
      }
    }
    .hot-cont {
      /*margin-top: 0.2666667rem;*/
      .hot-list {
        /*position: fixed;*/
        /*padding-top: 2.85rem;*/
        /*padding-top: 0.2666667rem;*/
        .page-loadmore-wrapper {
          background-image: url(../../static/img/dian.png);
          background-size: 0.1333333rem 5.4666667rem;
          background-repeat: repeat-y;
          background-position: 5% 0;
          .contents {
            margin-bottom: 0.32rem;
            text-align: left;
            .date-time {
              float: left;
              width: 12%;
              text-align: center;
              font-size: 0.32rem;
              .date-times {
                float: left;
                width: 90%;
                height: 0.64rem;
                line-height: 0.64rem;
                background: #e93030;
                color: #ffffff;
              }
            }
            .article {
              float: left;
              width: 88%;
              .title {
                float: left;
                width: 100%;
                text-indent: 0.1333333rem;
                padding: 0.32rem 0px;
                font-size: 0.4rem;
                color: #202020;
                padding-bottom: 0.16rem;
                background: #ffffff;
                font-weight: bold;
              }
              .update-time {
                float: left;
                width: 100%;
                text-indent: 0.1333333rem;
                padding-bottom: 0.16rem;
                font-size: 0.32rem;
                color: #202020;
                background: #ffffff;
              }
              .page {
                float: left;
                /*width: 98%;*/
                width: 100%;
                line-height: 0.5866667rem;
                padding-bottom: 0.32rem;
                font-size: 0.3733333rem;
                /*padding-left: 5px;*/
                background: #ffffff;
                color: #202020;
                overflow: hidden;
              }
            }
            .stock {
              float: right;
              width: 88%;
              background: #ffffff;
              .stock-introduce {
                float: left;
                width: 100%;
                text-indent: 0.1333333rem;
                font-size: 0.4rem;
                font-weight: bold;
                margin-bottom: 0.1333333rem;
                color: #202020;
                height: 0.8rem;
                line-height: 0.8rem;
                background-image: url(../../static/img/kk.png);
                background-size: 0.08rem 0.4rem;
                background-position: 0 center;
                background-repeat: no-repeat;
              }
              .stock-info {
                li {
                  display: inline-block;
                  height: 1.0666667rem;
                  margin-bottom: 0.2666667rem;
                  color: white;
                  position: relative;
                  width: 45%;
                  margin-left: 3%;
                  font-size: 0.4rem;
                  border-radius: 0.1066667rem;
                  font {
                    float: left;
                    width: 50%;
                    height: 1.0666667rem;
                    line-height: 0.7466667rem;
                    text-align: center;
                    color: #202020;
                  }
                  span {
                    float: left;
                    height: 1.0666667rem;
                    color: #ffffff;
                    text-align: center;
                    width: 50%;
                    line-height: 0.6933333rem;
                    border-top-right-radius: 0.08rem;
                    border-bottom-right-radius: 0.08rem;
                  }
                }
              }
            }
            .xgyz {
              float: right;
              width: 88%;
              text-indent: 0.133333rem;
              height: 0.6666667rem;
              line-height: 0.6666667rem;
              font-size: 0.4rem;
              font-weight: bold;
              color: #202020;
              background-image: url(../../static/img/kk.png);
              background-size: 0.08rem 0.4rem;
              background-position: 0 center;
              background-repeat: no-repeat;
            }
            .keyword {
              float: right;
              width: 88%;
              line-height: 0.9333333rem;
              margin-bottom: 0.16rem;
              background: #ffffff;
              padding-bottom: 0.08rem;
              ul {
                float: left;
                width: 100%;
                li {
                  float: left;
                  display: inline-block;
                  color: #202020;
                  margin-top: 0.08rem;
                  margin-left: 0.2666667rem;
                  padding-left: 0.2666667rem;
                  padding-right: 0.2666667rem;
                  line-height: 0.6933333rem;
                  font-size: 0.3733333rem;
                  border-radius: 0.08rem;
                  font-weight: lighter;
                  border: 1px solid #e5e5e5;
                }
              }
            }
          }
        }
        .page-infinite-loading {
          text-align: center;
          height: 1.3333333rem;
          line-height: 1.3333333rem;
          font-size: 1.5rem;
        }

        .red {
          border: 1px solid #e93030;
          font {
            label {
              float: left;
              width: 100%;
              color: #999999;
              line-height: 0.1866667rem;
              font-size: 0.3466667rem;
            }
          }
          span {
            background-color: #e93030;
            label {
              float: left;
              width: 100%;
              line-height: 0.1866667rem;
            }
          }
        }
        .focus {
          background: #e93030 !important;
          border-radius: 0.08rem;
          color: #ffffff !important;
        }
        .green {
          border: 1px solid #159143;
          span {
            background-color: #159143;
            label {
              float: left;
              width: 100%;
              line-height: 0.1866667rem;
            }
          }
          font {
            label {
              float: left;
              width: 100%;
              color: #999999;
              line-height: 0.1866667rem;
              font-size: 0.3466667rem;
            }
          }
        }
        .gray {
          border: 1px solid #e5e5e5;
          span {
            background-color: #e5e5e5;
            line-height: 1.0666667rem !important;
            color: gray !important;
          }
          font {
            label {
              float: left;
              width: 100%;
              color: #999999;
              line-height: 0.1866667rem;
              font-size: 0.3466667rem;
            }
          }
        }
      }
    }
  }

  .sel_essence {
    background-color: #e93030;
    color: #fff;
  }

</style>
